<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <link href="css/app.css" rel="stylesheet" />
    	<style>
			.chart {
				height: 140px;
				margin: 0px;
				padding: 0px;
			}
			h5 {
				margin-top: 30px;
				font-weight: bold;
			}
			h5:first-child {
				margin-top: 15px;
			}
		</style>
</head>
<body>
	<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">水瓶座（Aquarius）</h1>
		</header>
		<div class="mui-content">
		<div class="mui-content-padded">
			<h5>职业排名</h5>
			<div class="chart" id="barChart"></div>
				<h5>人物介绍</h5><hr/>
				<h6>经济学家</h6>
                  <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;约瑟夫·斯蒂格利茨(英文名：Joseph Stiglitz)，水瓶座，生日：1943-02-09,详见<a href="">中文维基百科,</a><a href="https://en.wikipedia.org/wiki/Joseph_Stiglitz">Wikipedia</a></p>
			<h6>乒乓球运动员</h6>
                  <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;邓亚萍(英文名：Deng Yaping)，水瓶座，生日：1973-02-05,详见<a href="">中文维基百科,</a><a href="https://en.wikipedia.org/wiki/Deng_Yaping">Wikipedia</a></p>
			
		</div>
		</div>
			<script src="js/mui.min.js"></script>
			<script src="libs/echarts-all.js"></script>
			<script>
			var getOption = function(chartType) {
				var chartOption = chartType == 'pie' ? {} :{
					color: ['#911111', ],
					legend: {
						show: false,
						data: ['水瓶']
					},
					grid: {
						x:'27%',
            y: '4%',
			width:'63%',
     height: '110px',
			 borderWidth: '0',
					},
					calculable: false,
					yAxis: [{
						type: 'category',
						 axisLine: {
                    lineStyle: {
                        color: '#000',
                        width: 1,
                    },
                },
                axisLabel: {
                    interval: 'auto',
                },
				 splitLine: {
                    show: false,
                },
						data: ['罪犯', '教皇', '兵乓球运动员', '诺贝尔文学奖', '经济学家',]
					}],
					xAxis: [{
						type: 'value',
						 axisLine: {
                    lineStyle: {
                        color: '#000',
                        width: 1,
                    },
                },
				 splitLine: {
                    show: false,
                },
					}],
					series: [{
						name: '水瓶',
						type: chartType,
						  itemStyle: {
                    normal: {
                        label: {
                            show: true,
							 textStyle: {
                                color: '#000',
                            },
                        }
                    }
                },
						data: [9.62, 10.45, 10.92, 11.01, 11.11,]
					}]
				};
				return chartOption;
			};
			var byId = function(id) {
				return document.getElementById(id);
			};
			var barChart = echarts.init(byId('barChart'));
			barChart.setOption(getOption('bar'));
			</script>
</body>
</html>